<script setup lang="ts">
//这里编写ts代码
//1.简单数据，类型推导
import { ref } from 'vue'
const count = ref(100)
count.value = 100
// count.value = '100' 会报错，推导为count为number类型，给它赋值字符串型会报错
//2.复杂类型，泛型函数 
const year = ref<string | number>('2028')
year.value = 2030
//问题：标注ref函数类型，可以满足把下图所示的数据赋值给value属性
// [{
//   id: '1001',
//   name: '男士鞋子',
//   price: 280
// }, {
//   id: '1002',
//   name: '男士卫衣',
//   price: 180
// }]
type Item = {
  id: string,
  name: string,
  price: number
}
const list = ref<Item[]> ([])
list.value = [{
  id: '1001',
  name: '男士鞋子',
  price: 280
},{
  id: '1002',
  name: '男士卫衣',
  price: 180
}]
</script>

<template>
  <div>
    开始写vue和ts
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>
